<template>
  <div>
    <a-form :form="form" @submit="handleSubmit" :labelCol="formItemLayout.labelCol" :wrapperCol="formItemLayout.wrapperCol">
      <div>
        <p class="title">客服工作时间</p>
        <a-form-item label="人工客服">
          <time-range
            :minute-step="30"
            valueFormat="HH:mm"
            format="HH:mm"
            v-decorator="[
              'kefuOnlineTime',
              {
                rules: [
                  {
                    required: true,
                    validator: validatorTime
                  }
                ]
              }
            ]"
          />
        </a-form-item>
        <a-form-item label="电话客服">
          <time-range
            :minute-step="30"
            valueFormat="HH:mm"
            format="HH:mm"
            v-decorator="[
              'kefuPhoneTime',
              {
                rules: [
                  {
                    required: true,
                    validator: validatorTime
                  }
                ]
              }
            ]"
          />
        </a-form-item>
      </div>
      <div>
        <p class="title">客服接入规则</p>
        <a-form-item label="扫码场景接待客服组ID">
          <a-input-number
            style="width:100%"
            placeholder="请输入七鱼客服组ID"
            v-decorator="[
              'scKefuGroupId',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入七鱼客服组ID'
                  }
                ]
              }
            ]"
          ></a-input-number>
        </a-form-item>
        <a-form-item label="非扫码场景接待客服组ID">
          <a-input-number
            style="width:100%"
            placeholder="请输入七鱼客服组ID"
            v-decorator="[
              'otherKefuGroupId',
              {
                rules: [
                  {
                    required: true,
                    message: '请输入七鱼客服组ID'
                  }
                ]
              }
            ]"
          ></a-input-number>
        </a-form-item>
      </div>
      <a-form-item label="适用小程序">
        <a-checkbox-group
          v-decorator="[
            'brandIds',
            {
              rules: [
                {
                  required: true,
                  message: '请选择适用小程序'
                }
              ]
            }
          ]"
        >
          <a-row>
            <a-col :span="12" v-for="item in brands" :key="item.weid">
              <a-checkbox :value="item.weid" :disabled="checkBrandList.includes(item.weid)">
                {{ item.name }}
              </a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
      <a-row>
        <a-col :span="24" class="info-action">
          <a-button type="primary" @click="reset">返回</a-button>
          <a-button type="primary" html-type="submit" class="ml-20" :loading="loading">保存</a-button>
        </a-col>
      </a-row>
    </a-form>
  </div>
</template>
<style scoped>
.info-action {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  margin-bottom: 20px;
}
.ml-20{
  margin-left: 20px;
}
.title {
  color: #000;
  font-size: 14px;
  font-weight: bold;
  padding-left: 10%;
}
</style>
<script>
import { brands } from '../../util/brand'
import timeRange from '../../components/time'
import { addkf, checkBrands } from '@/api/micromall'
export default {
  components: {
    timeRange
  },
  data() {
    return {
      brands,
      formItemLayout: {
        labelCol: {
          xs: { span: 8 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 16 },
          sm: { span: 16 }
        }
      },
      loading: false,
      checkBrandList: []
    }
  },
  props: {
    info: {
      type: Object,
      default: null
    }
  },
  watch: {
    info: {
      immediate: true,
      deep: true,
      handler: function(n) {
        console.log('watch', n)
        if (n && n.kefuOnlineTime) {
          this.$nextTick(() => {
            let kefuOnlineTime = n.kefuOnlineTime.split('-')
            let kefuPhoneTime = n.kefuPhoneTime.split('-')
            console.log(kefuOnlineTime, kefuPhoneTime)
            this.form.setFieldsValue({
              brandIds: Array.isArray(n.brandId) ? n.brandId : JSON.parse(n.brandId),
              kefuOnlineTime: { start: kefuOnlineTime[0], end: kefuOnlineTime[1] },
              kefuPhoneTime: { start: kefuPhoneTime[0], end: kefuPhoneTime[1] },
              scKefuGroupId: n.scKefuGroupId || '',
              otherKefuGroupId: n.otherKefuGroupId || ''
            })
          })
        } else {
          this.form.resetFields()
        }
      }
    }
  },
  beforeCreate() {
    this.form = this.$form.createForm(this, { name: 'problemForm' })
  },
  mounted() {
    this.getBrands()
  },
  methods: {
    async getBrands() {
      const { info } = this
      const re = await checkBrands() //不能选的
      if (re.code == 200) {
        if (info && info.brandId) {
          const brandId = JSON.parse(info.brandId)
          this.checkBrandList = re.data.filter(item => !brandId.includes(item))
        } else {
          this.checkBrandList = re.data
        }
      } else {
        this.$message.error(re.msg)
      }
    },
    validatorTime(rule, value, callback) {
      if (rule.required && value == undefined) {
        callback('请选择时间')
      } else if (!value.start || value.start == '' || value.start == null) {
        callback('请选择开始时间')
      } else if (!value.end || value.end == '' || value.end == null) {
        callback('请选择结束时间')
      }
      callback()
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          console.log(values)
          this.submit(values)
        }
      })
    },
    async submit(values) {
      const { info } = this
      if (info) {
        values.id = info.id
      }
      values.type = 4
      values.kefuOnlineTime = values.kefuOnlineTime.start + '-' + values.kefuOnlineTime.end
      values.kefuPhoneTime = values.kefuPhoneTime.start + '-' + values.kefuPhoneTime.end
      const re = await addkf(values)
      if (re.code == 200) {
        this.$message.success(info ? '编辑成功' : '新增成功')
        this.reset()
      } else {
        this.$message.error(re.msg)
      }
    },
    reset() {
      this.form.resetFields()
      this.$emit('close')
    }
  }
}
</script>
